<template>
	<view class="myPurse" v-if="userInfos">
		<view class="myPurse-headr">
			<view class="myPurse-headr-title" >
				<text>可提现余额 </text>
				<image @click="checkSee" :src="see?'../../static/ico/ears.png':'../../static/ico/ear.png'" mode="aspectFit" class="ico" ></image>
			</view>
			<view class="myPurse-headr-money">
				<text v-if="see">￥</text>
				<text v-if="see&&userInfos">{{(userInfos.money * 1).toFixed(2)}}</text>
			   <text  v-if="!see" class="myPurse-headr-money-fuqian">*******</text>
			</view>
			<view class="myPurse-headr-info">
				<view class="myPurse-headr-info-avatar">
					<image :src="userInfos.portrait" mode="aspectFill"></image>
				</view>
				<view class="myPurse-headr-info-user">
					<view class="myPurse-headr-info-user-name">
						<text>{{userInfos.nickname}}</text>
					</view>
					<view class="myPurse-headr-info-user-herf" v-if="userInfos.buy_passwd">
						<text>钱包地址：{{userInfos.buy_passwd.slice(0,8)+'...'+userInfos.buy_passwd.slice(userInfos.buy_passwd.length-8,userInfos.buy_passwd.length)}}</text>
					</view>
				</view>
				<view class="myPurse-headr-info-user-ctrlV" @click="fuzhiFucn">
					<image src="@/static/images/myIfon/fuzhi.png" mode=""></image>
				</view>
			</view>
		</view>
	    <view class="myPurse-operate">
	    	<view class="myPurse-operate-recharge" @click="recharge">
	    		<view class="myPurse-operate-recharge-img">
	    			<image src="@/static/images/myIfon/chongzhi.png" mode=""></image>
	    		</view>
				<view class="myPurse-operate-recharge-title">
				    <text>充值</text>
					<text>即时到账</text>
				</view>
	    	</view>
			<view class="myPurse-operate-Withdrawals"@click="toPage('/pages/wallet/withdraws')" >
				<view class="myPurse-operate-Withdrawals-img">
				    <image src="@/static/images/myIfon/tixian.png" mode=""></image>
				</view>
				<view class="myPurse-operate-Withdrawals-title" >
					<text>提现</text>
					<text>安全快捷</text>
				</view>
			</view>
	    </view>
		<view class="myPurse-tixianList">
			<view class="myPurse-tixianList-title">
				<text>余额变动明细</text>
				<text @click="toPage('/pages/wallet/details')">查看全部</text>
			</view>
			<scroll-view class="myPurse-tixianList-scroll" scroll-y="true" @scrolltolower="scrolltolower">
			       <view class="myPurse-tixianList-item" v-for="(l,i) in list" @click="topages(l)">
			       	<view class="myPurse-tixianList-item-cangp">
			       		<text>{{l.title}}</text>
			       		<text>{{l.create_time}}</text>
			       	</view>
			       	<view class="myPurse-tixianList-item-money">
			       		<text>{{l.turnover}}</text><br>
			       		<text>余额{{l.money_proof}}</text>
			       	</view>
			       </view>
			        <view class="load"> <!--做滚动加载提示使用, more:上拉加载更多 loading:加载中 noMore:没有更多数据-->
			          <uni-load-more :status="status"></uni-load-more>
			        </view>
			    </scroll-view>
		</view>
		<!-- <block v-if="list.length<1">
			<Empty text="暂无数据" :type='0'></Empty>
		</block> -->
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import Empty from '@/components/Empty.vue'
	// import uniLoadMore from 'uni-load-more'
	import { mapState, mapMutations } from 'vuex'
	export default{
		mixins:[mixin],
		components: {Empty},
		data(){
			return{
				see:false,
				userInfos:null, //个人信息
				page:1,
				page_size:10,
				list:[],
				status:'noMore',
				total:0
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
        onShow() {
			this.page = 1
			this.getUser()
        	this.initList()
        },
		onPullDownRefresh() {
			this.page = 1
			this.getUser()
		    this.initList()
			// this.myGoodsList()
		},
		// onReachBottom(){
		// 	if(this.list.length<this.total){
		// 		this.getList()
		// 	}			
		// },
		methods:{
		 async	getUser(){
				let data = await this.$http({
					url: this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {}
				})
				this.userInfos = data.data
			},
		async initList(){
			    let res = await this.$http({
			    	url:this.$api.billList,
			    	method: 'get',
			    	hideLoading: true,
			    	data:{
			    		page:this.page,
			    		page_size:this.page_size,
			    		bill_type_id:0
			    	}
			    })    
				if(res.code===200){
					if(this.page==1){
						this.list = []
					}
					res.data.list.data.forEach(item=>{
						this.list.push(item)
					})
					this.total = res.data.list.total				
				}else{
					uni.showToast({
					    title: res.msg,
						icon:'none',
					})
				}
			},
			checkSee(){
				this.see = !this.see
			},
			topages(e){
				uni.setStorage({
					key:'sinfo',
					data:e,
					success:()=> {
						uni.navigateTo({
							url:'/pages/wallet/info'
						})
					}
				})
			},
			recharge(){
				uni.navigateTo({
					url:'/pages/wallet/recharge'
				})
			},
			scrolltolower(){
				if(this.list.length<this.total){
						this.status ='loading'
						this.initList()
						this.page +=1
				}else{
						this.status = 'noMore'
				}
			
			},
			fuzhiFucn(){
				uni.setClipboardData({
					data: this.userInfos.buy_passwd,
					showToast:false,
					success() {
						uni.showToast({
						    title: '内容已复制到剪切板',
							icon:'none',
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.myPurse{
		margin-bottom: 20rpx;
		&-headr{
			width: calc(100vw - 60rpx - 32rpx);
			height: 310rpx;
			background-image: url('@/static/images/myIfon/moneyBj.png');
			background-size: 100% 100%;
			margin: auto;
			
			padding-left:32rpx;
			&-title{
				padding-top: 31rpx;
				display: flex;
				align-items: center;
			
			 text{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #93B1FF;
				}
				image{
					margin-left: 16rpx;
					width: 24rpx;
					height: 22rpx;
				}
			}
			&-money{
			position: absolute;
			  text:nth-child(1){
				  font-size: 24rpx ;
				  font-family: PingFangSC-Regular, PingFang SC;
				  font-weight: 400;
				  color: #fff;
			  }
			  text:nth-child(2){
			  	  font-size: 34rpx;
			  	  font-family: PingFangSC-Regular, PingFang SC;
			  	  font-weight: 400;
			  	  color: #fff;
			  }
			  &-fuqian{
				  margin-left: 10rpx;
				    font-size: 40rpx !important;
					font-weight: 400;
					color: #fff;
			  }
			}
			&-info{
				display: flex;
				align-items: center;
				margin-top: 89rpx;
				width: calc(100vw - 120rpx);
				height: 120rpx;
				background-color: #fff;
				border-radius: 12rpx;
				&-avatar{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-left: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-user{
					margin-left: 12rpx;
					&-name{
						font-size: 28rpx;
						font-family: DIN Alternate Bold;
						font-weight: 500;
						color: #16172F;
					}
					&-herf{
						font-size: 24rpx;
						font-family: DIN Alternate Bold;
						font-weight: 400;
						color: #737482;
					}
					&-ctrlV{
						width: 22rpx;
						height: 24rpx;
						margin-left: 12rpx;
						margin-top: 2rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	    &-operate{
			display: flex;
			margin-top: 24rpx;
			&-recharge{
				width: calc(50vw - 30rpx - 12rpx);
				height: 126rpx;
				background-color: #F8F7FC;
				margin-right: 24rpx;
				margin-left: 30rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				&-img{
					margin-left: 21rpx;
					width: 102rpx;
					height: 102rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-title{
					display: flex;
					flex-direction: column;
					text:nth-child(1){
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #16172F;
					}
					text:nth-child(2){
					
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
			}
			&-Withdrawals{
				display: flex;
				align-items: center;
				width: calc(50vw - 30rpx - 12rpx);
				height: 126rpx;
				background-color: #F8F7FC;
				border-radius: 8rpx;
				&-img{
					margin-left: 21rpx;
					width: 102rpx;
					height: 102rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-title{
					display: flex;
					flex-direction: column;
					text:nth-child(1){
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #16172F;
					}
					text:nth-child(2){
					
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
			}
		}
	    &-tixianList{
			width: calc(100vw - 60rpx);
			
			margin: auto;
				overflow-y: auto;
			&-title{
				margin-top: 40rpx;
				text:nth-child(1){
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #16172F;
				}
				text:nth-child(2){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
					float: right;
					margin-top:15rpx ;
				}
			}
			&-scroll{
				height: calc(100vh - 791rpx + 88rpx);
			}
		    &-item{
				width: calc(100vw - 60rpx);
			
				height: 132rpx;
				background: #F7F8FA;
				border-radius: 8rpx;
				display: flex;
				white-space:nowrap;
				margin-bottom: 21rpx;
				&-cangp{
					display: flex;
					flex-direction: column;
					margin-left: 24rpx;
					width: calc((100vw - 60rpx) * 0.6);
					text:nth-child(1){
						margin-top: 20rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #16172F;
					}
					text:nth-child(2){
						margin-top: 12rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
				&-money{
					width: calc((100vw - 60rpx) * 0.4);
					// display: flex;
					// // flex-direction: column;
					// margin-left: auto;
					// justify-content: end;
					
					text:nth-child(1){
						margin-top: 20rpx;
				    	font-size: 28rpx;
				    	font-family: PingFangSC-Semibold, PingFang SC;
				    	font-weight: 600;
				    	color: #16172F;
						float: right;
						margin-right: 24rpx;
				    }
					text:nth-child(3){
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
						float: right;
						margin-right: 24rpx;
						// margin-top: -50rpx;
					}
				}
			}
		}
	}
</style>